<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- b1 -->
    <button>点击1</button>
    <button>点击2</button>
    <button>点击3</button>
    <script>
      let o = {
        name: 'andy'
      }
      function fn(a, b) {
        console.log(this, a + b)
      }
      // a1
      fn.bind(o)
      fn()
      // a2 a3
      let f = fn.bind(o, 1, 2)
      f()

      /* let btn = document.querySelector('button')
      btn.onclick = function () {
        this.disabled = true
        // b3
        let that = this
        // b4
        setTimeout(
          function () {
            this.disabled = false
          }.bind(this),
          3000
        )
      } */
      let btns = document.querySelectorAll('button')
      for (let i = 0; i < btns.length; i++) {
        btns[i].onclick = function () {
          this.disabled = true
          // b5
          /* setTimeout(
            function () {
              btns[i].disabled = false
            },
            3000
          ) */
          setTimeout(
            function () {
              this.disabled = false
            }.bind(this),
            3000
          )
        }
      }
    </script>
  </body>
</html>
